﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Maxit</title>
    <style type="text/css">
        
        td
        {
            width:40px;
            height:25px;
            text-align:center;
            vertical-align:middle;
        }
        .validCells
        {
            background:#EFEEC9;
        }
        .validCells td:hover
        {
            background:lime;
        }
    </style>
    <script type="text/javascript" language="javascript">
        var markerPos = "cell37";
        var currentPosVal = 37;
        var markerDir = 0;
        var P1Score = 0;
        var P2Score = 0;
        var P1Last = 0;
        var P2Last = 0;

        function shuffle(array) {
            var currentIndex = array.length, temporaryValue, randomIndex;
            while (0 !== currentIndex) {
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;
                temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
            }
            return array;
        }

        function placeValues() {
            var a = [15,10,9,9,8,8,7,7,7,6,6,6,5,5,5,5,4,4,4,4,3,3,3,3,3,2,2,2,2,2,2,1,1,1,1,1,0,0,0,0,0,0,
                    -1,-1,-1,-1,-1,-2,-2,-2,-2,-3,-3,-3,-4,-4,-4,-5,-5,-6,-6,-7,-9];
            var b = shuffle(a);
            for (var i = 1; i < 64; i++) {
                document.getElementById("cell" + ((i + (i > 36 ? 1 : 0)).toString().length == 1 ? "0" : "") + (i + (i > 36 ? 1 : 0)).toString()).innerText = b[i - 1];
            }
            highlightActive();
        }

        function changeTurn() {
            if (markerDir > 0)
                markerDir = 0;
            else 
                markerDir = 1;

            document.getElementById("p1Log").innerText = "Last Player 1 Taken: " + P1Last.toString();
            document.getElementById("p2Log").innerText = "Last Player 2 Taken: " + P2Last.toString();
            document.getElementById("p1ScoreLog").innerText = "Player 1 Score: " + P1Score.toString();
            document.getElementById("p2ScoreLog").innerText = "Player 2 Score: " + P2Score.toString();
            highlightActive();
        }

        function highlightActive() {
            currentPosVal = parseInt(markerPos.substr(4, 2), 0);
            var cIndex = currentPosVal % 8;
            var cCellId = "";
            for (var j = 1; j < 65; j++) {
                cCellId = "cell" + (j.toString().length == 1 ? "0" : "") + j.toString();
                document.getElementById(cCellId).className = "";
            }
            if (markerDir == 0) {
                for (var j = 0; j < 8; j++) {
                    cIndex = currentPosVal - ((currentPosVal % 8)==0?8:(currentPosVal % 8)) + j + 1;
                    cCellId = "cell" + (cIndex.toString().length == 1 ? "0" : "") + cIndex.toString();
                    document.getElementById(cCellId).className += "validCells";
                }
            } else {
                for (var j = 0; j < 8; j++) {
                    cIndex = (currentPosVal % 8==0?8:currentPosVal % 8) + j * 8;
                    cCellId = "cell" + (cIndex.toString().length == 1 ? "0" : "") + cIndex.toString();
                    document.getElementById(cCellId).className += "validCells";
                }
            }
        }

        function userSelected(clickedCell) {
            if (clickedCell.innerText != "" && clickedCell.className == "validCells") {
                if (markerDir == 0) {
                    P1Last = parseInt(clickedCell.innerText);
                    P1Score += P1Last;
                } else {
                    P2Last = parseInt(clickedCell.innerText);
                    P2Score += P2Last;
                }
                clickedCell.innerText = "";
                markerPos = clickedCell.id;
                changeTurn();
                checkGameEnd();
            }
        }

        function checkGameEnd() {
            var hasValid = false;

            if (markerDir == 0) {
                for (var j = 0; j < 8; j++) {
                    cIndex = currentPosVal - (currentPosVal % 8) + j + 1;
                    cCellId = "cell" + (cIndex.toString().length == 1 ? "0" : "") + cIndex.toString();
                    if (document.getElementById(cCellId).innerText != "") hasValid = true;
                }
            } else {
                for (var j = 0; j < 8; j++) {
                    cIndex = (currentPosVal % 8 == 0 ? 8 : currentPosVal % 8) + j * 8;
                    cCellId = "cell" + (cIndex.toString().length == 1 ? "0" : "") + cIndex.toString();
                    if (document.getElementById(cCellId).innerText != "") hasValid = true;
                }
            }

            if (!hasValid) {
                if (P1Score > P2Score) {
                    document.getElementById("finalLog").innerText = "Congratulation! Player 1 wins !!!";
                } else if (P1Score < P2Score) {
                    document.getElementById("finalLog").innerText = "Congratulation! Player 2 wins !!!";
                } else {
                    document.getElementById("finalLog").innerText = "Game has tied !!!";
                }
            }
        }

        function onPageLoad() {
            for (var j = 1; j < 65; j++) {
                cCellId = "cell" + (j.toString().length == 1 ? "0" : "") + j.toString();
                var createClickHandler = function (cell) { return function () { userSelected(cell); }; };
                document.getElementById(cCellId).onclick = createClickHandler(document.getElementById(cCellId));
            }

            placeValues();
        }

    </script>
</head>
<body onload="onPageLoad()">
<p style="display:none;">
The object of MAXIT is to get as many points as possible. Two players can <br />
play against each other, or one against the computer. <br />
You get points by moving a marker  "**"  to a space with a number in it.  <br />
The first player always moves horizontally and the second moves vertically.   <br />
You indicate the place you want to move to by using the space bar to position <br />
yourself, and then push return to take that piece. 
<br />
<br />
<br />
</p>
    <table border="1">
        <tr name="gameRow" >
            <td id="cell01"></td>
            <td id="cell02"></td>
            <td id="cell03"></td>
            <td id="cell04"></td>
            <td id="cell05"></td>
            <td id="cell06"></td>
            <td id="cell07"></td>
            <td id="cell08"></td>
        </tr>
        <tr name="gameRow" >
            <td id="cell09"></td>
            <td id="cell10"></td>
            <td id="cell11"></td>
            <td id="cell12"></td>
            <td id="cell13"></td>
            <td id="cell14"></td>
            <td id="cell15"></td>
            <td id="cell16"></td>
        </tr>
        <tr name="gameRow" >
            <td id="cell17"></td>
            <td id="cell18"></td>
            <td id="cell19"></td>
            <td id="cell20"></td>
            <td id="cell21"></td>
            <td id="cell22"></td>
            <td id="cell23"></td>
            <td id="cell24"></td>
        </tr>
        <tr name="gameRow" >
            <td id="cell25"></td>
            <td id="cell26"></td>
            <td id="cell27"></td>
            <td id="cell28"></td>
            <td id="cell29"></td>
            <td id="cell30"></td>
            <td id="cell31"></td>
            <td id="cell32"></td>
        </tr>
        <tr name="gameRow" >
            <td id="cell33"></td>
            <td id="cell34"></td>
            <td id="cell35"></td>
            <td id="cell36"></td>
            <td id="cell37"></td>
            <td id="cell38"></td>
            <td id="cell39"></td>
            <td id="cell40"></td>
        </tr>
        <tr name="gameRow" >
            <td id="cell41"></td>
            <td id="cell42"></td>
            <td id="cell43"></td>
            <td id="cell44"></td>
            <td id="cell45"></td>
            <td id="cell46"></td>
            <td id="cell47"></td>
            <td id="cell48"></td>
        </tr>
        <tr name="gameRow" >
            <td id="cell49"></td>
            <td id="cell50"></td>
            <td id="cell51"></td>
            <td id="cell52"></td>
            <td id="cell53"></td>
            <td id="cell54"></td>
            <td id="cell55"></td>
            <td id="cell56"></td>
        </tr>
        <tr name="gameRow" >
            <td id="cell57"></td>
            <td id="cell58"></td>
            <td id="cell59"></td>
            <td id="cell60"></td>
            <td id="cell61"></td>
            <td id="cell62"></td>
            <td id="cell63"></td>
            <td id="cell64"></td>
        </tr>
        <tr>
        <td id="finalLog" colspan="8">&nbsp;</td>
        </tr>
        <tr>
        <td id="p1Log" colspan="4" style="text-align:left">Last Player 1 Taken: </td>
        <td id="p2Log" colspan="4" style="text-align:left">Last Player 2 Taken: </td>
        </tr>
        <tr>
        <td id="p1ScoreLog" colspan="4" style="text-align:left">Player 1 Score: </td>
        <td id="p2ScoreLog" colspan="4" style="text-align:left">Player 2 Score: </td>
        </tr>
    </table>
</body>
</html>
<script language="javascript" type="text/javascript">
//    for (var j = 1; j < 65; j++) {
//        cCellId = "cell" + (j.toString().length == 1 ? "0" : "") + j.toString();
//        var createClickHandler = function (cell) { return function () { userSelected(cell); }; };
//        document.getElementById(cCellId).onclick = createClickHandler(document.getElementById(cCellId));
//    }

</script>